<template>

 
    <div>
    <el-form-item >
      <el-date-picker
        v-model="paymentType.CheckIntime"
        type="date"
        placeholder="Pick a date"
        clearable
      />
      ~
      <el-date-picker
        v-model="paymentType.CheckOuttime"
        type="date"
        placeholder="Pick a date"
        clearable
      />

       <el-select v-model="paymentType.RoomName"  placeholder="请选择" clearable style="width: 100px; margin-left: 100px;">
         <el-option v-for="item in SelectText" :key="item.roomTypeId" :label="item.roomName" :value="item.roomName"/>
       </el-select>


       <el-select v-model="paymentType.FullStatus"  placeholder="请选择" clearable style="width: 100px; ">
        <el-option label="全部" :value="0" />
        <el-option label="待确认" :value="1" />
        <el-option label="已完成" :value="2" />
        <el-option label="已关闭" :value="3" />
       </el-select>  
       
     
      <el-input v-model="paymentType.UserName" placeholder="请输入" clearable  style="width: 100px; " />

      <el-button type="primary" @click="tableShow()">查询</el-button>
   
    </el-form-item>

    <div>
      <el-select v-model="paymentType.PaidStatus"  placeholder="请选择" clearable style="width: 100px; ">
        <el-option label="全部" :value="0" />
        <el-option label="预定付费" :value="1" />
        <el-option label="到店付费" :value="2" />
    
       </el-select>  

       <el-select v-model="paymentType.OrderType"  placeholder="请选择" clearable style="width: 100px; ">
        <el-option label="全部" :value="0" />
        <el-option label="普通" :value="1" />
        <el-option label="全民营销" :value="2" />
        <el-option label="分销" :value="3" />
       </el-select>  
    </div>
   
  </div>
<el-table :data="Tablevlues" style="width: 100%">
    <el-table-column fixed prop="roomId" label="房型Id" width="150" />
    <el-table-column fixed prop="roomName" label="房型" width="150" />
    <el-table-column prop="userName" label="客房姓名" width="120" />
    <el-table-column prop="user_Phone" label="手机号" width="120" />
    <el-table-column prop="checkIntime" label="入住时间" width="120" />
    <el-table-column prop="checkOuttime" label="离店时间" width="120" />
    <el-table-column prop="outofPocketamount" label="实付金额" width="120" />
    <el-table-column prop="fullStatus" label="状态" width="120" />
    <el-table-column prop="outOfPocketamount" label="金额" width="120" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="Zhifu(scope.row.id)">支付</el-button>
        <el-button link type="primary" size="small">清除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { ref, onMounted,reactive} from 'vue';
import axios from 'axios';
onMounted(()=>{
  tableShow();
  TextShow();
})
const SelectText:any = ref([])

const TextShow =(()=>{
  axios.get('https://localhost:44392/api/app/orderservices/text').then((res)=>{
    SelectText.value = res.data.data
  })
})
const paymentType = reactive({
  OrderType :1,
  PaidStatus:1,
  CheckIntime:'',
  CheckOuttime:'',
  FullStatus:1,
  RoomName:'',
  UserName:'',
  UserId:"3a185ebe-648e-1984-ff6b-e8a3b4cdfdfd",
  PageIndex:1,
  PageSize:100,
  totalCount:0,
  totalPage:0
})
const Tablevlues = ref([])


const Zhifu =(id:any)=>{

  alert(id)
  axios.get("https://localhost:44392/api/AliPay/WapPay",{
    params:{
    id:id
    }
  }).then((res)=>{

  window.location.href = res.data.data

  }) 
}




const tableShow = () => {


    axios.get('https://localhost:44392/api/app/orderservices/orders', {
        params: {
            OrderType: paymentType.OrderType,
            PaidStatus: paymentType.PaidStatus,
            CheckIntime: paymentType.CheckIntime,
            CheckOuttime: paymentType.CheckOuttime,
            FullStatus: paymentType.FullStatus,
            RoomName: paymentType.RoomName,
            UserName: paymentType.UserName,
            UserId: paymentType.UserId,
            PageIndex: paymentType.PageIndex,
            PageSize: paymentType.PageSize
        }
    })
   .then((res) => {
    console.log(res.data.data.data)
        Tablevlues.value = res.data.data.data;
        paymentType.totalCount = res.data.data.totalCount;
        paymentType.totalPage = res.data.data.totalPage;
    })
   .catch((error) => {
        console.error('获取订单数据失败:', error);
        if (error.response) {
            // 服务器返回了响应，但状态码不是 2xx
            console.log('响应数据:', error.response.data);
            console.log('响应状态码:', error.response.status);
            console.log('响应头:', error.response.headers);
        } else if (error.request) {
            // 请求已发送，但没有收到响应
            console.log('请求信息:', error.request);
        } else {
            // 其他错误
            console.log('错误信息:', error.message);
        }
    });
};


</script>
<style scoped>
.hotel-order {
  padding: 20px;
}
.filter-container {
  margin-bottom: 20px;
}
</style>
